<template>
	<div id="navbar">
		<img class="logo" src="./assets/money.png">
		<a href="#" class="header-title">OH-MY-MONEY</a>
		<ul class="nav">
			<li v-if="didSignedIn">
				<a href="#" v-on:click="openSearchBox" class="btn-search"><img src="./assets/search.png"></a>
			</li>
			<li v-if="didSignedIn" class="username-title">
				<a href="#" v-on:click="openUserPanel">{{ username }}</a>
			</li>
			<li v-if="!didSignedIn">
				<a href="#" v-on:click="signIn">登录</a>
			</li>
			<li v-if="!didSignedIn">
				<a href="#" v-on:click="signUp">注册</a>
			</li>
		</ul>
	</div>
</template>

<script>
import {bus} from "./main.js"

export default {
	name: 'navbar',
	data() {
		return {
			didSignedIn: false,
			username: null
		}
	},
	methods:{
		signIn: function(){
			bus.$emit('show_signin_modal')
		},
		signUp: function(){
			bus.$emit('show_signup_modal')
		},
		openUserPanel: function(){
			bus.$emit('show_userpanel')
		},
		openSearchBox: function(){
			bus.$emit('show_search_box')
		}
	},
	mounted: function(){
		bus.$on('signin_success', function(){
			this.username = window.delegate.currentUser.username
			this.didSignedIn = true
		}.bind(this))
		bus.$on('sign_out', function(){
			this.didSignedIn = false
		}.bind(this))
	}
}
</script>

<style>
#navbar{
	position: fixed;
	top: 0;
	width: 100%;
	height: 30px;
	z-index: 100;
	padding-top: 10px;
	padding-bottom: 10px;	
	padding-left: 30px;
	padding-right: 60px;
	border-bottom: 2px solid black;
	background: rgba(0, 0, 0, 0.85)
}

.header-title{
	display: inline-block;
	font-family: sans-serif;
	margin-left: 20px;
	color: white;
	position: relative;
	bottom: 8px;
	font-size: 20px;
}

.username-title{
	bottom: 15px;
	position: relative;
}

.nav{
	position: fixed;
	display: block;
	right: 60px;
	top: 0px;
}

.nav li{
	display: inline-block;
	margin-right: 40px;
	margin-top: 0px;
}

a{
	font-family: sans-serif;
	text-decoration: none;
	color: white;
}

.logo{
	height: 30px;
	width: 30px;
}

.btn-search{
	position: relative;
	bottom: 5px;
}

.btn-search img{
	height: 30px;
	width: 30px;
}

</style>